<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script src="./lib/vue.js"></script>
        <title>08 vue计算属性</title>
    </head>
    <body>
        <div id="box">
            <p>模版表达式中js代码实现：{{ myName.substring(0, 1).toLocaleUpperCase() + myName.substring(1) }}</p>
            <p>函数实现：{{ myNameMethod() }}</p>
            <!-- 计算属性调用时不能加() -->
            <p>计算属性实现：{{ myNameComputed }}</p>
            <!-- 
                计算属性和函数的区别：
                1、计算属性依赖的状态变化时自动执行一次，而函数调用时才执行；
                2、计算属性有缓存机制，函数没有，即当页面上多少次调用属性计算和函数时，函数会执行多次，属性计算只会执行一次；
             -->
            <p>第二次函数实现：{{ myNameMethod() }}</p>
            <p>第二次计算属性实现：{{ myNameComputed }}</p>
        </div>

        <script>
            const vm = new Vue({
                el: '#box',
                data() {
                    return {
                        myName: 'xiaoming'
                    };
                },
                methods: {
                    myNameMethod() {
                        console.log('函数执行了...');
                        return this.myName.substring(0, 1).toLocaleUpperCase() + this.myName.substring(1);
                    }
                },
                computed: {
                    // 计算属性定义时需加()
                    myNameComputed() {
                        console.log('计算属性执行了...');
                        return this.myName.substring(0, 1).toLocaleUpperCase() + this.myName.substring(1);
                    }
                }
            });
        </script>
    </body>
</html>
